<template>
    <div class="photo-gallery">
        <div class="photo-row" v-for="(row, rowIndex) in chunkedPhotos" :key="rowIndex">
            <div class="photo-container" v-for="(photo, photoIndex) in row" :key="photoIndex">
                <img :src="photo" :alt="'Photo ' + ((rowIndex * 3) + (photoIndex + 1))" />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'PhotoGallery',
    data() {
        return {
            photos: [
                'https://codelover.club/coursefiles/images/film/创意.jpeg',
                'https://codelover.club/coursefiles/images/film/剧情.jpeg',
                'https://codelover.club/coursefiles/images/film/动画.jpeg',
                'https://codelover.club/coursefiles/images/film/励志.jpeg',
                'https://codelover.club/coursefiles/images/film/实验.jpeg',
                'https://codelover.club/coursefiles/images/film/广告.jpeg',
                'https://codelover.club/coursefiles/images/film/搞笑.jpeg',
                'https://codelover.club/coursefiles/images/film/旅行.jpeg',
                'https://codelover.club/coursefiles/images/film/时尚.jpeg',
                'https://codelover.club/coursefiles/images/film/汽车.jpeg',
                'https://codelover.club/coursefiles/images/film/游戏.jpeg',
                'https://codelover.club/coursefiles/images/film/爱情.jpeg',
                'https://codelover.club/coursefiles/images/film/生活.jpeg',
                'https://codelover.club/coursefiles/images/film/纪录.jpeg',
                'https://codelover.club/coursefiles/images/film/美食.jpeg',
                'https://codelover.club/coursefiles/images/film/运动.jpeg',
                'https://codelover.club/coursefiles/images/film/音乐.jpeg',
                'https://codelover.club/coursefiles/images/film/预告.jpeg',
            ]


        };
    },
    computed: {
        chunkedPhotos() {
             
            const chunkSize = 3;
            return this.photos.reduce((chunks, photo, index) => {
                if (index % chunkSize === 0) {
                    chunks.push([photo]);
                } else {
                    chunks[chunks.length - 1].push(photo);
                }
                return chunks;
            }, []);
        },
    },
};
</script>

<style scoped>
.photo-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #ebc1c1
}

.photo-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    
}

.photo-container {
    flex: 0 0 calc(33.333% - 10px);
    
    margin-right: 10px;
    
}

.photo-container:last-child {
    margin-right: 0;
   
}

img {
    width: 100%;
    height: auto;
    display: block;
}
</style>